<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<u-form :model="model" ref="uForm">
			<view class="head-box" @click="chooseAvatar">
				<view class="avatar-box">
					<u-avatar size="168" :src="avatarUrl(model.avatar)"></u-avatar>
				</view>
				<view class="text-box">点击修改头像</view>
			</view>
			<u-cell-group :border="false" class="u-form">
				<u-form-item :border-bottom="false" prop="name">
					<u-cell-item class="from-cell-item" @click="navTo('/pages/platform/user/modify-name')">
						<view class="cell-item-title" slot="title">
							<view class="title-label">
								名字
							</view>
							<view class="title-value">{{model.name}}</view>
						</view>
					</u-cell-item>
				</u-form-item>
				<u-form-item :border-bottom="false" prop="sex">
					<u-cell-item class="from-cell-item" @click="sexActionShow=true">
						<view class="cell-item-title" slot="title">
							<view class="title-label">
								性别
							</view>
							<view class="title-value">{{model.sex|sexFormat}}</view>
						</view>
					</u-cell-item>
				</u-form-item>
				<u-form-item :border-bottom="false" prop="phonenumber">
					<u-cell-item class="from-cell-item" @click="">
						<view class="cell-item-title" slot="title">
							<view class="title-label">
								手机
							</view>
							<view class="title-value">{{model.phonenumber|judgeValue}}</view>
						</view>
					</u-cell-item>
				</u-form-item>
				<u-form-item :border-bottom="false" prop="email">
					<u-cell-item class="from-cell-item" @click="" :border-bottom="false">
						<view class="cell-item-title" slot="title">
							<view class="title-label">
								邮箱
							</view>
							<view class="title-value">{{model.email|judgeValue}}</view>
						</view>
					</u-cell-item>
				</u-form-item>
			</u-cell-group>
		</u-form>
		<view class="form-footer">
			<u-button class="btn" type="primary" @click="submit">提交</u-button>
		</view>
		<u-popup v-model="sexActionShow" mode="bottom" border-radius="30">
			<view class="sex-popup">
				<view class="head-title">性别</view>
				<view class="popup-bottom">
					<u-cell-group :border="false">
						<u-cell-item v-for="(item,index) in sexList " :key="index" :border-top="item.borderTop"
							:border-bottom="item.borderBottom" :title="item.text" :arrow="false"
							@click="chooseSex(item)"></u-cell-item>
					</u-cell-group>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	/**
	 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
	 */
	export default {
		data() {
			return {
				model: {
					name: '',
					sex: '',
					avatar: '',
					phonenumber: '',
					email: ''
				},
				rules: {},
				sexList: [{
					text: '男',
					value: "0",
					borderTop: false,
					borderBottom: true
				}, {
					text: '女',
					value: "1",
					borderTop: true,
					borderBottom: true
				}, {
					text: '保密',
					value: "2",
					borderTop: true,
					borderBottom: false
				}],
				sexActionShow: false,
				avatarBase64: '',
				uploadFileUrl: '',
				header: {}
			};
		},
		created() {
			this.header.Authorization = this.vuex_token
			this.uploadFileUrl = this.vuex_config.baseUrl + '/common/upload'
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				this.avatarBase64 = path;
				// 可以在此上传到服务端
				uni.uploadFile({
					url: this.uploadFileUrl,
					header: this.header,
					filePath: path,
					name: 'file',
					complete: (res) => {
						const data = JSON.parse(res.data)
						this.model.avatar = data.fileName
					}
				});
			})
		},
		filters: {
			sexFormat(sex) {
				let value = "保密"
				if (sex === "0") value = "男"
				else if (sex === "1") value = "女"
				return value
			},
			judgeValue(value) {
				if (value && value !== 'null') return value
				return ''
			}
		},
		onLoad() {
			this.$u.api.getUserInfo().then(res => {
				if (res.code == '200') {
					this.model = {
						id: res.user.id,
						name: res.user.name,
						sex: res.user.sex,
						email: res.user.email,
						phonenumber: res.user.phonenumber,
						officeTel: res.user.officeTel,
						loginDate: res.user.loginDate,
						loginIp: res.user.loginIp,
						avatar: res.user.avatar
					}
				} else if (res.result == 'login') {
					uni.reLaunch({
						url: '/pages/sys/login/index'
					});
				} else {
					this.$u.toast(res.message);
				}
			});
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			uni.$on('modifyName', (data) => {
				this.model.name = data
			});
		},
		methods: {
			chooseSex(item) {
				this.model.sex = item.value
				this.sexActionShow = false
			},
			avatarUrl(avatarUrl) {
				if (this.avatarBase64 != '') {
					return this.avatarBase64;
				}
				avatarUrl = this.vuex_user.avatar
				return this.handleUrl(avatarUrl);
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			chooseAvatar() {
				this.$u.route({
					url: 'uni_modules/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						destWidth: 200, // 输出图片宽高
						rectWidth: 200, // 裁剪框的宽高
						fileType: 'jpg', // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
					}
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// #ifdef MP-WEIXIN || MP-TOUTIAO
						this.$u.toast('您填写的信息有误!');
						if (this.avatarBase64 != '' && !this.avatarBase64.startsWith('data:')) {
							this.avatarBase64 = 'data:image/jpeg;base64,' + uni.getFileSystemManager()
								.readFileSync(this.avatarBase64, "base64")
						}
						// #endif
						this.$u.api.user.saveUserInfo(this.model).then(res => {
							if (res.code == '200') {
								// console.log(res);
								this.vuex_user.avatar = this.model.avatar;
								this.$u.vuex('vuex_user', this.vuex_user);
								uni.showModal({
									title: '提示',
									content: res.msg,
									showCancel: false,
									success: function() {
										uni.navigateBack();
									}
								});
							} else {
								this.$u.toast(res.msg);
							}
						});
					} else {
						this.$u.toast('您填写的信息有误，请根据提示修正。');
					}
				});
			},
			cancel() {
				uni.navigateBack();
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background: #f5f5f5;
	}

	.head-box {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.avatar-box {
			margin-top: 30rpx;

		}

		.text-box {
			margin-top: 15rpx;
			color: #999;

		}
	}

	.u-form {
		background: #fff;

		.from-cell-item {
			.cell-item-title {
				font-size: 13px;
				font-weight: 700;
				display: flex;
				line-height: 13px;

				.title-label {
					color: #999;
					margin-right: 30rpx;
				}

				.title-value {
					margin-left: 30rpx;
				}
			}

		}

	}

	.sex-popup {

		.head-title {
			padding: 20rpx;
			padding-bottom: 0;
			font-size: 14px;
			font-weight: 700;
		}

		.popup-bottom {
			padding: 20rpx;
			color: #999;

		}
	}
</style>